<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例——图片切换</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
		<style type="text/css">
			#app-switchImgs{
				margin: auto;
				width: 350px;
			}
		</style>
	</head>
	<body>
		<div id="app-switchImgs" class="form-group">
		    <div class="input-group">
		    	<div class="input-group-addon left" v-on:click="prev" v-show="imgIndex>0">
		    		<span class="glyphicon glyphicon-minus"></span>
		    	</div>
		    	<div class="midimg">
		    		<img v-bind:src="imgArr[imgIndex]"/>
		    	</div>
		    	<div class="input-group-addon right" @click="next" v-show="imgIndex<imgArr.length-1">
		    		<span class="glyphicon glyphicon-plus"></span>
		    	</div>
		    </div>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var switchImgsApp = new Vue({
				el:"#app-switchImgs",
				data:{
					imgIndex:0,
					imgArr:[
					"img/01.png",
					"img/02.png",
					"img/03.png",
					"img/04.png",
					"img/05.png"
					],
				},
				methods:{
					prev:function(){
						if(this.imgIndex>0){
							this.imgIndex--;
						}
					},
					next:function(){
						if(this.imgIndex<this.imgArr.length-1){
							this.imgIndex++;
						}
					}
				}
			})
		</script>
	</body>
</html>
